<template>
  <div class="cart-box">
    <!-- 头部 -->
    <van-nav-bar title="购物车" left-arrow @click-left="$router.back()">
      <template #right>
        <van-icon name="ellipsis" />
      </template>
    </van-nav-bar>
    <!-- 购物车列表 -->
    <div class="swipe-wraper">
      <van-swipe-cell v-for="item in store.cartList" :key="item.goodsId">
        <template #default>
          <div class="goods">
            <van-checkbox class="btn" v-model="item.checked"></van-checkbox>
            <van-card
              :num="item.goodsCount"
              :price="item.sellingPrice"
              :desc="item.goodsName"
              :title="item.goodsName"
              class="goods-card"
              :thumb="item.goodsCoverImg"
            >
              <template #num>
                <van-stepper @change="change(item)" v-model="item.goodsCount" />
              </template>
            </van-card>
          </div>
        </template>
        <template #right>
          <van-button
            @click="deleteClick(item.cartItemId)"
            class="delete-button"
            square
            type="danger"
            text="删除"
          />
        </template>
      </van-swipe-cell>
    </div>
    <!-- 底部 -->
    <van-submit-bar
      :price="totalMoney"
      button-text="结算"
      v-show="store.cartList.length"
      @submit="onSubmit"
    >
      <van-checkbox v-model="checkAll">全选</van-checkbox>
      <template #tip>
        你的收货地址不支持同城送, <span>修改地址</span>
      </template>
    </van-submit-bar>
  </div>
</template>

<script setup>
import { useCartStore } from "@/store/useCartStore.js";
import { onMounted, reactive, computed } from "vue";
import { useRouter } from "vue-router";
let router = useRouter();

let store = useCartStore();

onMounted(() => {
  store.getCartListAsync();
});

let change = (item) => {
  store.putCartListAsync(item.cartItemId, item.goodsCount);
};

let checkAll = computed({
  get() {
    return store.cartList.every((item) => item.checked);
  },
  set(val) {
    store.cartList.forEach((item) => (item.checked = val));
  },
});

let totalMoney = computed(() => {
  return store.cartList.reduce((prev, next) => {
    return (
      prev + (next.checked ? next.goodsCount * next.sellingPrice * 100 : 0)
    );
  }, 0);
});

let deleteClick = (id) => {
  // console.log("id:", id);
  store.deleteCartListAsync(id);
};

let onSubmit = () => {
  router.push("/addressList");
};
</script>

<style lang="less" scoped>
.cart-box {
  padding-bottom: 120px;

  .swipe-wraper {
    .delete-button {
      height: 100%;
    }

    .goods {
      display: flex;
      margin: 5px;

      .van-checkbox {
        padding: 0 10px;
      }

      .van-card {
        width: 90%;
        margin-top: 0px;
      }
    }
  }

  .van-submit-bar {
    margin-bottom: 50px;
  }
}
</style>